<template>
    <div style="height: 50px;">
        <el-button round @click="AddScrapsProducts()">保存</el-button>
    </div>

    <h1 style="text-align: center; font-weight: bold; font-size: 30px;">生产废料</h1>

    <!-- 基本信息 -->
    <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
        <tr style="height: 60px;">
            <td :colspan="6">
                <h3 style="vertical-align: middle;">基本信息</h3>
            </td>
        </tr>
        <tr>
            <td style="text-align: right;width: 140px;">单据主题：</td>
            <td>
                <input v-model="form.productionWasteTopic" type="text"
                    style="height: 40px; width: 100%;text-align: center;" />
            </td>
            <td style="text-align: right;">单据编号：</td>
            <td>
                <input v-model="form.pDocumentNumber" type="text" style="height: 40px; width: 100%;text-align: center;"
                    placeholder="保存后自动生成" :disabled="true" />
            </td>
            <td style="text-align: right;">废料日期：</td>
            <td>
                <input v-model="form.productionDate" type="date"
                    style="height: 40px; width: 100%;text-align: center;" />
            </td>
        </tr>
        <tr>
            <td style="text-align: right;height: 40px;">是否需要入库：</td>
            <td>
                <input v-model="form.pIsStorage" type="radio" name="pIsStorage" :value="1"
                    style="height: 20px;margin-left: 70px;" />是
                <input v-model="form.pIsStorage" type="radio" name="pIsStorage" :value="2"
                    style="height: 20px;margin-left: 70px;" />否
            </td>
            <td style="text-align: right;height: 40px;">制单人员：</td>
            <td>
                <input v-model="form.pDocumentMakers" type="text" style="height: 40px; width: 100%;text-align: center;"
                    :disabled="true" />
            </td>
        </tr>
        <tr>
            <td style="text-align: right;height: 40px;">备注：</td>
            <td :colspan="5">
                <textarea v-model="form.pRemark" type="text"
                    style="height: 60px; width: 100%;text-align: center;"></textarea>
            </td>
        </tr>
    </table>

    <!-- 废料明细 -->
    <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;margin-top: 40px;">
        <tr style="height: 60px;">
            <td :colspan="6">
                <h3 style="vertical-align: middle;">
                    废料明细
                    <el-button @click="addhang()">新增行</el-button>
                </h3>
            </td>
        </tr>
        <tr>
            <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" style="width: 30px;" /></th>
            <th style="height: 40px;">序号</th>
            <th>产品名称</th>
            <th>产品编号</th>
            <th>规格</th>
            <th>废料数量</th>
        </tr>
        <tr v-for="(item, index) in check" :key="index">
            <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" @click="huoqu" /></td>
            <td style=" text-align: center;">{{ index + 1 }}</td>
            <td><input v-model="item.pName" type="text" style="height: 40px; width: 100%;text-align: center;"
                    @dblclick="dialogVisible = true" placeholder="双击选择产品名称" />
            </td>
            <td><input v-model="item.pNumber" type="text" style="height: 40px;width: 100%;text-align: center;"
                    :disabled="true" /></td>
            <td><input v-model="item.pUnit" type="text" style="height: 40px;width: 100%;text-align: center;"
                    :disabled="true" />
            </td>
            <td><input v-model="item.stripProductNum" type="text" style="height: 40px;width: 100%;text-align: center;"
                    @change="sumRPNum" />
            </td>
        </tr>
    </table>

    <!-- 上传图片 -->
    <table border="1" style="border-collapse: collapse; width: 100%; height: 40px; margin-top: 40px;">
        <tr style="height: 60px;">
            <td :colspan="6">
                <h3 style="vertical-align: middle;">
                    附件
                    <el-button @click="chuan()">批量上传</el-button>
                </h3>
            </td>
        </tr>
        <tr style="height: 40px;">
            <th>文件名称</th>
            <th>文件大小</th>
            <th>上传人</th>
            <th>上传时间</th>
        </tr>
        <tr style="height: 50px;">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>



    <!-- 产品名称弹框 -->
    <el-dialog v-model="dialogVisible" title="产品名称选择" width="1000" style="height: 700px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps"
                        default-expand-all="true" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="productlist" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="pName" label="产品名称" align="center" />
                        <el-table-column prop="pNumber" label="产品编号" align="center" />
                        <el-table-column prop="pUnit" label="规格型号" align="center" />
                    </el-table>
                    <!-- 分页 -->
                    <table>
                        <tr>
                            <td>
                                <el-pagination v-model:current-page="productPage.pindex"
                                    v-model:page-size="productPage.psize" prev-text="上一页" next-text="下一页"
                                    :page-sizes="[3, 5, 7]" :background="true" layout="total, slot,sizes"
                                    :total="productPage.sumCount">
                                    ，当前是{{ productPage.pindex }}/{{ productPage.pageLast }}页，每页{{ productPage.psize
                                    }}条
                                </el-pagination>
                            </td>
                            <td>
                                <el-pagination v-model:current-page="productPage.pindex"
                                    v-model:page-size="productPage.psize" prev-text="上一页" next-text="下一页"
                                    :page-sizes="[3, 5, 7]" :background="true" layout=" slot, prev, pager, next"
                                    :total="productPage.sumCount">
                                    <el-button :disabled="productPage.pindex == 1"
                                        @click="productPage.pindex = 1">首页</el-button>
                                </el-pagination>
                            </td>
                            <td>
                                <el-pagination v-model:current-page="productPage.pindex"
                                    v-model:page-size="productPage.psize" prev-text="上一页" next-text="下一页"
                                    :page-sizes="[3, 5, 7]" :background="true" layout=" slot, jumper"
                                    :total="productPage.sumCount">
                                    <el-button :disabled="productPage.pindex == productPage.sumCount"
                                        @click="productPage.pindex = productPage.pageLast">尾页</el-button>
                                </el-pagination>
                            </td>
                        </tr>
                    </table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible = false">
                保存
            </el-button>
        </template>
    </el-dialog>

</template>

<script setup lang='ts'>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
import http from '../../../http.js'

const dialogVisible = ref(false)

//单据编号随机数
const generateRandomNumber = () => {
    const a = Math.floor(100000 + Math.random() * 900000); // 生成一个 6 位的随机数
    sessionStorage.setItem('Vendor', JSON.stringify(a));
}

//添加实体
const form = reactive({
    "pwId": 0,
    "pDocumentNumber": "",
    "productionWasteNumber": "",
    "productionWasteTopic": "",
    "productionDate": "",
    "pIsStorage": "",
    "pDocumentMakers": localStorage.getItem('UserName'),
    "pRemark": "",
    "office_Id": "",
    "user_Id": "",
    "addName": "",
    "addTime": "",
    "productWasteList": [
        {
            "pspId": 0,
            "productionWasteNumber": "",
            "productId": 0,
            "pScrapsNumber": "",
            "office_Id": "",
            "user_Id": 0,
            "addName": "",
            "addTime": ""
        }
    ]
})


//点击新增行
const check = ref([])
const addhang = () => {
    check.value.push({
        pName: '',
        pNumber: '',
        pUnit: '',
        rPNum: '',
        rpPrice: ''
    });
}

//#region  产品名称弹框

//显示供应商中的供应商类别树形
var VendorType = ref([]);
const getVendorType = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelect').then(res => {
        if (res.data.code == 0) {
            VendorType.value = res.data.data
        }
        console.log(VendorType.value)
    })
}

const productPage = reactive({
    pindex: 1,
    psize: 10,
    pageLast: 0,
    sumCount: 0,
    PName: "",
    PNumber: "",
})
//显示产品列表
const productlist = ref([])
const ProductList = () => {
    axios.get(http.zblnb + '/cg/api/ProcurementReturn/GetProductList', {
        params: {
            pindex: productPage.pindex,
            psize: productPage.psize,
            PName: productPage.PName || "",
            PNumber: productPage.PNumber || "",
            ProductTypeId: 0
        }
    })
        .then(res => {
            productlist.value = res.data.data.list
            productPage.sumCount = res.data.data.sumCount;
            productPage.pageLast = res.data.data.pageLast
            console.log(res.data)
        })
}

//选中的产品名称
const handleSelectionChange = (val: User[]) => {
    check.value = val
    console.log(val)
    console.log(check.value[0].pName)
}


//分页
watch(productPage, () => {
    ProductList();
})


//#endregion


//点击复选框获取选中的产品的值
const ids = ref([])
const selectedRows = ref([])
const huoqu = () => {
    if (ids.value) {
        selectedRows.value = check.value.filter(item => item.productId);
    }
    console.log(selectedRows.value)
}



//添加
const AddScrapsProducts = () => {
    const model = {
        "pDocumentNumber": sessionStorage.getItem('Vendor'),
        "productionWasteNumber": form.productionWasteNumber,
        "productionWasteTopic": form.productionWasteTopic,
        "productionDate": form.productionDate,
        "pIsStorage": form.pIsStorage,
        "pDocumentMakers": localStorage.getItem('UserName'),
        "pRemark": form.pRemark,
        "office_Id": '0',
        "user_Id": 0,
        productWasteList: selectedRows.value.map(item => ({
            productId: item.productId,
            productionWasteNumber: form.productionWasteNumber,
            pScrapsNumber: item.stripProductNum,
            office_Id: '0',
            user_Id: 0,
        }))
    }
    console.log(model)
    axios.post(http.zblnb + '/sc/api/Scraps/AddScrapsProduct', model)
        .then(res => {
            console.log(res.data.data)
            if (res.data.data > 0) {
                ElMessage.success('添加成功');
                router.push('/ListScraps');
            }
            else {
                ElMessage.error('添加失败');
            }
        })
}



onMounted(() => {
    getVendorType();
    generateRandomNumber();
    ProductList();
})



</script>

<style></style>